<script setup>
import { useUserStore } from '@/stores/userStore'; 

const activeIndex = "1";
const userStore = useUserStore();
</script>

<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4" style="display: flex; flex-direction: row; align-items: center">
          <img src="/images/logo.png" style="height: 60px" />
          <h2 style="padding-left: 4px">技术社区</h2>
        </el-col>
        <el-col :span="8">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            style="border-bottom: none !important"
          >
            <el-menu-item index="1">
                <router-link to="/">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">文章</el-menu-item>
            <el-menu-item index="3">课程</el-menu-item>
            <el-menu-item index="4">
              <router-link to="/mall">商城</router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="8" style="height: 60px; line-height: 60px" class="hidden-only-sm">
          <el-input placeholder="请输入关键字" />
        </el-col>
        <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px" class="hidden-only-sm;">
          <div v-if="!userStore.isLoggedIn">
            <el-link type="primary">
              <router-link to="/user/login">登录</router-link>
            </el-link>
            <el-link type="primary" style="padding-left: 4px">
              <router-link to="/user/register">注册</router-link>
            </el-link>
          </div>
          <div v-else>
            <img src="/images/user-avatar.png" style="width: 30px; height: 30px; border-radius: 50%" />
            <el-link type="primary" style="padding-left: 4px">
              <router-link to="/user/person">{{ userStore.user.username }}</router-link>
            </el-link>
          </div>
        </el-col>
      </el-row>
    </el-header>
  </el-container>
</template>